<template>
  <div class="scorebar-wrapper">
    <div class="num">{{ num }}</div>
    <div class="name">{{ name }}</div>
  </div>
</template>

<script>
export default {
  name: 'ScoreBar',
  props: {
    num: {
      type: Number,
      default: 0,
    },
    name: {
      type: String
    }
  },
  data() {
    return {

    }
  },
  methods: {

  }
}
</script>

<style lang="scss">
.scorebar-wrapper {
  padding : 8px 16px;

  .num {
    font-size : 12pt;
    padding : 2px 0 4px;
    color : var(--el-text-color-regular);
  }

  .name {
    font-size : 12pt;
    color : var(--el-text-color-secondary);
  }

  .num, .name {
    text-align : center;
  }
}

</style>
